<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform2</title>

	<style>
		.box {
			border: 12px solid #ddd;
			position: relative;
			margin: 20px 100px;
			height: 300px;
			text-align: center;
		}
		.box img {
			position: absolute;
			top: 20px;
			left: 100px;
			width: 200px;
			height: 200px;
			transform-origin:center 300px;
			transition: transform 0.4s;
		}

		.box img:first-child {
			transform: rotate(-5deg);
		}
		.box img:last-child{
			transform: rotate(5deg);
		}
		.box:hover img:first-child {
			transform: rotate(-30deg);
		}
		.box:hover img:last-child {
			transform: rotate(30deg);
		}

		.box2{
			height: 400px;
			border: 1px solid #ccc;
			position: relative;
			/*animation:myfirst 1s;*/
		}

		@-webkit-keyframes my2 {
			from{transform:rotate(0deg);opacity: 0}
			to {transform:rotate(360deg);opacity: 1;}
		}

		@-webkit-keyframes myfirst
		{
			0%   {background:red;}
			25%  {background:yellow;}
			50%  {background:blue;}
			100% {background:green;}
		}

		.eye {
			background: #007aff;
			border-radius: 50%;
			height: 40px;
			width: 40px;
			position: absolute;
			top: 10px;
			left: 520px;
			transform-origin:center 150px;
			transition: all 0.4s;
			/*-webkit-animation:myfirst 3s;*/
			
		}

		

		.box2:hover .eye{
			-webkit-animation:my2 3s infinite linear;
		}

		.loading {
            z-index: 200;
            height: 50px;
            width: 50px;
            border: 10px solid #007aff;
            border-left: 10px solid #fff;
            position: absolute;
            top: 40px;
            left: 300px;
            border-radius: 50%;
            -webkit-animation:load 1s infinite linear;
            animation:load 1s;
        }
        @-webkit-keyframes load{
            from { transform: rotate(0deg);}
            to { transform: rotate(360deg);}
        }
         @keyframes load{
            from { transform: rotate(0);}
            to { transform: rotate(360);}
        }

		.box3 {
			margin:10px 100px;
		}
		.box3 div {
			display: inline-block;
			height: 20px;
			width: 2px;
			background: #007aff;
			margin-right: -4px;
			-webkit-animation: jump 1s infinite;
		}
		.box3 .line1{
			-webkit-animation-delay:-1s;
		}
		.box3 .line2 {
			-webkit-animation-delay:-.9s;
		}
		.box3 .line3 {
			-webkit-animation-delay:-.8s;
		}
		.box3 .line4 {
			-webkit-animation-delay:-.7s;
		}
		.box3 .line5 {
			-webkit-animation-delay:-.6s;
		}
		@-webkit-keyframes jump {
			0%,40%,100%{ transform: scaleY(.4);}
			20%{ transform: scaleY(1);}
		}

		.box4 {
			position: absolute;
			top: 100px;
		}
		.box4 li {
			float: left;
			display: inline-block;
			border: 1px solid #ccc;
			padding:3px;
			margin-right: 10px;
			-webkit-transition:all 0.9s;
			-webkit-animation:op 0.9s forwards;
		}

		.box4 li:nth-child(1){
			-webkit-animation-delay:.1s;
		}
		.box4 li:nth-child(2){
			-webkit-animation-delay:.2s;
		}
		.box4 li:nth-child(3){
			-webkit-animation-delay:.3s;
		}
		.box4 li:nth-child(4){
			-webkit-animation-delay:.4s;
		}
		.box4 li:nth-child(5){
			-webkit-animation-delay:.5s;
		}
		.box4 li:nth-child(6){
			-webkit-animation-delay:.6s;
		}
		.box4 li:nth-child(7){
			-webkit-animation-delay:.7s;
		}
		.box4 li:nth-child(8){
			-webkit-animation-delay:.8s;
		}
		.box4 li:nth-child(9){
			-webkit-animation-delay:.9s;
		}
		.box4 li:nth-child(10){
			-webkit-animation-delay:1s;
		}
		.box4 li:nth-child(11){
			-webkit-animation-delay:1.1s;
		}

		@-webkit-keyframes op{
			from { transform: scale(6);}
			to{ transform:scale(1);}
		}

		.box4 li img{
			width:60px;height: 40px;

		}
	</style>
</head>
<body>
	<!-- <div class="box">
		<img src="http://images.cnblogs.com/cnblogs_com/artech/158198/o_inside-asp-net-mvc-5-framework.png" alt="" />
		<img src="http://images.cnblogs.com/cnblogs_com/artech/158198/o_inside-asp-net-mvc-5-framework.png" alt="" />
		<img src="http://images.cnblogs.com/cnblogs_com/artech/201204/20120412074711512.png" alt="" />
	</div> -->

	<!-- <div class="box2">
		<div class="eye"></div>
	</div> -->

	 <!-- <div class="loading"></div>


	<div class="box3">
		<div class="line1"></div>
		<div class="line2"></div>
		<div class="line3"></div>
		<div class="line4"></div>
		<div class="line5"></div>
	</div> -->

	<div class="box4">
		<ul>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
			<li><img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>